import { useState } from 'react'
import { Table, Space, Row, Col, Card, Button, Pagination } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import Styles from './index.less'
import { useRequest } from 'umi'

const BasicList = () => {
  const [page, setPage] = useState(1)
  const [per_page, setPer_page] = useState(10)
  const initData = useRequest<{data: BasicListApi.Data}>(`https://public-api-v2.aspirantzhang.com/api/admins?X-API-KEY=antd&page=${page}&per_page=${per_page}`)


  const searchLayout = () => {
      return <div></div>
  }

  const beforeTableLayout = () => {
      return (
        <Row>
          <Col xs={24} sm={12}>...</Col>
          <Col xs={24} sm={12} className={Styles.tableToolbar}>
            <Space>
              <Button type="primary">add</Button>
              <Button type="primary">add</Button>
            </Space>
          </Col>
        </Row>
      )
  }

  const pageChange = () => {

  }

  const pageSizeChange = () => {
    
  }

  const afterTableLayout = () => {
    return (
      <Row>
        <Col xs={24} sm={12}>...</Col>
        <Col xs={24} sm={12} className={Styles.tableToolbar}>
          <Pagination
            total={initData?.data?.meta?.total || 0}
            current={initData?.data?.meta?.page || 1}
            pageSize={initData?.data?.meta?.per_page || 10}
            showSizeChanger
            showQuickJumper
            showTotal={total => `Total ${total} items`}
            onChange={pageChange}
            onShowSizeChange={pageSizeChange}
          />
        </Col>
      </Row>
    )
  }

  return (
    <PageContainer>
      {searchLayout()}
      <Card>
        {beforeTableLayout()}
        <Table 
          columns={initData?.data?.layout?.tableColumn.filter((item: BasicListApi.TableColumn) => !item.hideInColumn)}
          dataSource={initData?.data?.dataSource}
          loading={initData.loading}
          pagination={false} />
        {afterTableLayout()}
      </Card>
    </PageContainer>
  );
};

export default BasicList;
